<template>
  <view>
    <!-- <my-search :bgcolor="'pink'"></my-search> -->
    <my-search @click.native="gotoSearch"></my-search>

    <view class="cate-container">
      <scroll-view scroll-y="true" :style="{height:wh + 'px'}" class="cate-left">
        <view class="cate-left-view" :class="{active:act === index}" v-for="(item,index) in categoriesList"
          :key="item.cat_id" @click="changeActive(index)">{{item.cat_name}}
        </view>
      </scroll-view>

      <scroll-view scroll-y="true" :style="{height:wh + 'px'}" style="background-color: #ffffff;" class="cate-right"
        :scroll-top="scrollTop">
        <view v-for="(item,index) in cateList2" :key="item.cat_id">
          <view class="title"> | {{item.cat_name}} | </view>
          <view class="cate-body">
            <!-- 三级分类的item项 -->
            <view class="item3-item" v-for="(ele,index) in item.children" :key="ele.cat_id" @click="getGoodList(ele)">
              <view class="item3-item-img">
                <image :src="ele.cat_icon.replace('dev','web')"></image>
              </view>
              <text class="item3-name">{{ele.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>

    </view>
  </view>



</template>

<script>
  export default {
    data() {
      return {
        wh: 0,
        //分类列表 - 一级分类
        categoriesList: [],
        act: 0,
        //二级分类
        cateList2: [],
        //滚动条变化
        scrollTop: -1,
      };
    },
    onLoad() {
      //获取屏幕可用高度
      let wd = uni.getWindowInfo()
      this.wh = wd.windowHeight
      //调用函数，获取分类列表
      this.getCateList()
    },

    methods: {
      async getCateList() {
        let {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status === 200) {
          this.categoriesList = res.message
          // 默认第一个是大家电，给大家电的二级分类赋值
          this.cateList2 = this.categoriesList[0].children
        } else return uni.$showMsg()
      },


      //修改active的值 同时重新获取二级分类的数据
      changeActive(index) {
        this.act = index
        this.cateList2 = this.categoriesList[index].children
        //修改滚动条高度为0  在0和-1之间切换
        this.scrollTop = this.scrollTop == -1 ? 0 : -1
      },

      //点击图片跳转到对应的列表页面
      getGoodList(ele) {
        uni.navigateTo({
          url: `/subpkg/goods_list/goods_list?cid=${ele.cat_id}`
        })
      },

      //点击搜索后，跳转到搜索页面
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }

    }
  }
</script>

<style lang="scss">
  .cate-container {
    display: flex;
  }

  .cate-left {
    width: 120px;
  }

  .cate-left-view {
    background-color: #f7f7f7;
    line-height: 60px;
    text-align: center;
    font-size: 14px;

    &.active {
      background-color: #ffffff;
      position: relative;

      &::before {
        content: "";
        display: block;
        width: 3px;
        height: 30px;
        background-color: #c00000;
        position: absolute;
        top: 50%;
        left: 0;
        // 相对自己的高度
        transform: translateY(-50%);
      }
    }
  }

  .title {
    font-weight: 700;
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
  }

  .cate-body {
    display: flex;
    flex-wrap: wrap;

    .item3-item {
      width: 29%;
      height: 100px;
      padding: 5px 5px;
      text-align: center;
      font-size: 12px;

      // flex-direction: row;
      // justify-content: center;
      // align-items: center;

      .item3-item-img {
        width: 100%;
        height: 60%;
      }
    }
  }

  .item3-item-img image {
    width: 100%;
    height: 100%;
  }
</style>
